<template>
	<view class="px-16 py-12 ">
		<view class="flex flex-y-center gap-10 px-10">
			<image :src="USERINFO?.avatar?USERINFO.avatar:WEBCONFIG?.avatar" class="round-circle w-50 h-50 bg-white"></image>
			<view class="fs-20 fw-bold">{{USERINFO?.nickname ? USERINFO.nickname:'请先登录'}}</view>
			<!-- <text class="iconfont icon-youjiantou fw-bold"></text> -->
		</view>
		<view class="mt-20">
			<yNav :data="statisticsData"></yNav>
		</view>
		<view class="mt-20">
			<yPoints></yPoints>
		</view>
		<view class="mt-20">
			<yList></yList>
		</view>

		<y-popup ref="loginPopup" mode='bottom' round='12px'>
			<view class="pb-10">
				<y-login @close="loginPopup.close()"></y-login>
			</view>
		</y-popup>
	</view>
</template>

<script setup>
	import yList from './modules/y-list.vue';
	import yNav from './modules/y-nav.vue';
	import yPoints from './modules/y-points.vue';
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useRefs, useUserStore, useWebConfigStore } from '@/stores'
	import { ref } from 'vue';
	import { getCount } from '@/api/user'
	const { USERINFO } = useRefs(useUserStore())
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const { hasLogin, getUserInfo } = useUserStore()
	const loginPopup = ref(null)

	const statisticsData = ref({
		voice: 0,
		works: 0,
		scene: 0
	})

	onShow(() => {
		if (!hasLogin()) {
			setTimeout(() => {
				loginPopup.value.open()
			}, 300)
		} else {
			getUserInfo()
			getUserCount()
		}
	})

	const getUserCount = () => {
		getCount().then(res => {
			statisticsData.value = res.data
		})
	}
</script>

<style>

</style>